import React from 'react'
import Reflux from 'reflux'
import {
  LdhPage,
  LdhPageBody,
  LdhPageTable,
  LdhStatusBar,
} from '@biz/PageCompnents'
import { PublicAction } from '@/base/BaseAction'
import { createAction } from './Action'
import Store from './Store'
import buildConfig from './config'
import Search from './biz/Search'
import { Button, Modal, message } from 'antd'
import { onPostExportWashOrderXhr } from '@/api/coupon'
import './style.less'

let Config = {}
const prefix = 'recharge-order-page'
export default class WashOrderPage extends Reflux.Component {
  constructor(props) {
    super(props)
    this.action = createAction()
    Config = buildConfig(this.action)
    this.store = new Store(props, Config, this.action)
  }

  componentDidMount() {
    PublicAction.allShopList(({ voList = [] }) => {
      this.setState({ shopList: voList })
    })
    this.search()
  }

  search() {
    let { so } = this.state
    this.action.search(so)
  }

  handleStatusChange(v) {
    let { so } = this.state
    so.status = v
    so.searchByStatus = true
    this.action.search(so)
  }

  componentWillUnmount() {
    this.action.unmount()
  }

  /** 导出订单数据 */

  exportOrder() {
    const { so } = this.state
    Modal.confirm({
      title: '确认导出',
      content: '确定要导出订单数据吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        const hide = message.loading({
          content: '正在导出中，数据量过大可能会导致导出时间较长,请稍后...',
          duration: 0,
        })
        try {
          const params = { ...so }
          delete params.searchByStatus
          if (params.status == null) {
            delete params.status
          }
          delete params.pageNumber
          delete params.pageSize

          onPostExportWashOrderXhr({
            ...params,
            callback: () => {
              hide()
              message.success('导出完成')
            },
            errorCallback: () => {
              hide()
              message.error('导出失败,请重试')
            },
          })
        } catch (error) {
          hide()
          console.error('导出失败:', error)
          Modal.error({
            title: '导出失败',
            content: error.message || '导出过程中发生错误',
          })
        }
      },
    })
  }
  render() {
    let { so, statusList = [] } = this.state

    return (
      <LdhPage className={`${prefix} wash-order-page`}>
        <div className="export-btn">
          <Button type="primary" onClick={this.exportOrder.bind(this)}>
            导出
          </Button>
        </div>
        <Search
          store={this.state}
          onChange={(newSo) => {
            this.setState(
              (prevState) => ({
                ...prevState,
                so: newSo,
              }),
              () => {
                this.action.search(newSo)
              }
            )
          }}
        />
        <LdhPageBody>
          <LdhStatusBar
            list={statusList}
            value={so.status}
            onChange={this.handleStatusChange.bind(this)}
          />

          <LdhPageTable config={Config} store={this.state}></LdhPageTable>
        </LdhPageBody>
      </LdhPage>
    )
  }
}
